<script lang="ts" setup>
import { OperateList, PagePath, PageTitle } from '@/common/constants'
import { getUserInfoByIdService, getUserOperatesByRoleService } from '@/common/service/users'
import { useUserStore } from '@/common/store'
import type { OperateItem } from '@/common/types/user'
import { goToPage } from '@/common/utils'
import skeleton from '@/common/skeleton/pages/my.vue'

const { contentAreaHeight, tabBarHeight } = useLayoutInfo()

/**
 * userStore
 */
const { hope_user_info, setUserInfo, clearUserInfo, hope_token } = useUserStore()

/** 用户信息 */
const userInfo = ref(hope_user_info)

/**
 * 获取用户信息
 */
const getUserInfoById = async () => {
  const { data } = await getUserInfoByIdService()
  userInfo.value = data
  setUserInfo(data)
}

/** 退出登录 */
const loginOut = () => {
  uni.showModal({
    title: TIPS,
    content: CONFIRM_LOGOUT,
    success: (success) => {
      if (success.confirm) {
        // 退出登录
        clearUserInfo()
        uni.reLaunch({
          url: PagePath.HOME,
        })
      }
    },
  })
}

const operateList = ref<OperateItem[]>(OperateList)

/** 获取当前用户的操作项 */
const getUserOperate = async () => {
  const { data } = await getUserOperatesByRoleService()
  operateList.value = data
}
const isLoading = ref(false)

onLoad(async () => {
  if (hope_token) {
    isLoading.value = true
    await Promise.all([getUserInfoById(), getUserOperate()])
    isLoading.value = false
  }
})

onShow(async () => {
  // 获取当前用户操作项
  if (hope_token) {
    isLoading.value = true
    await Promise.all([getUserInfoById(), getUserOperate()])
    isLoading.value = false
  }
})
</script>

<template>
  <!-- 自定义头部导航栏组件 -->
  <hope-nav-bar :title="PageTitle.MY" />
  <scroll-view
    scroll-y :style="{
      height: `${contentAreaHeight - tabBarHeight}px`,
    }"
  >
    <template v-if="!isLoading">
      <view class="my-container">
        <view class="user-card">
          <!-- 用户卡片组件 -->
          <hope-user-card
            v-if="hope_token && userInfo" :nickname="userInfo?.nickname" :avatar-url="userInfo?.avatarUrl"
            :points="userInfo?.points"
          />
        </view>

        <!-- 用户操作项列表 -->
        <view class="my-operate">
          <view v-for="item in operateList" :key="item.id">
            <hope-user-operate-item :operate-item="item" @on-click="() => goToPage(item.path)" />
          </view>
          <view v-if="!hope_token" class="my-operate-login" @click="() => goToPage(PagePath.LOGIN)">
            去登录
          </view>

          <view v-else class="my-operate-login" @click="loginOut">
            退出登录
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <skeleton />
    </template>
  </scroll-view>
</template>

<style scoped lang="scss">
.user-card {
  padding-inline: 30rpx;
  margin-top: 60rpx;
}

.my {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &-operate {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 50rpx;
    margin-top: 60rpx;
    padding: $border-radius-base;
    background-color: $color-white;
    border-top-left-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;

    &-login {

      height: 150rpx;
      text-align: center;
      line-height: 150rpx;
      border-radius: $border-radius-base;
      background-color: $color-primary;
      font-size: $font-size-lg;
      color: $color-white;
    }
  }
}
</style>
